<template>
    <section>
        <div class="header">
            <span class="el-icon-alarm-clock"></span>限时好礼<p>金币换豪礼</p>
        </div>
        <div class="body">
            <div class="gift-item" v-for="item in gift" :key="item.id">
                <img :src="item.img" alt="">
                <p class="title">{{item.title}}</p>
                <div class="price">
                    <span class="gold">{{item.gold}}金币</span>
                    <span class="oldprice">¥{{item.oldprice}}</span>
                </div>
                <div class="discount">{{item.discount}}</div>
            </div>
        </div>
        <p class="more">查看更多<span class="el-icon-arrow-right"></span></p>
    </section>
</template>

<script>
export default {
    data() {
        return {
            gift: [{
                id: 1,
                img: './static/images/gift1.jpg',
                title: '3元品质联盟红包',
                gold: '90',
                oldprice: '3',
                discount: '限时优惠'
            },{
                id: 2,
                img: './static/images/gift2.jpg',
                title: '扫地机器人',
                gold: '9',
                oldprice: '99',
                discount: '特价换购'
            },{
                id: 3,
                img: './static/images/gift3.jpg',
                title: '数码经络按摩仪',
                gold: '180',
                oldprice: '239',
                discount: '特价换购'
            }]
        }
    }
}
</script>

<style scoped>
    section {
        background: #fff;
        border-top: 1px solid #eee;
        border-bottom: .133333vw solid #eee;
    }
    .header {
        margin-top: 20px;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
    }
    .el-icon-alarm-clock {
        color: #ff5339;
        font-size: 20px;
        margin-left: -10px;
        margin-right: 5px;
    }
    .header p {
        margin-top: -7px;
        font-size: 10px;
        color: #999;
        font-weight: 400;
    }
    .body {
        display: flex;
        justify-content: space-between;
        padding: 12px 0 15px 15px;
    }
    .gift-item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 13px;
    }
    .gift-item img {
        width: 120px;
        height: 110px;
        margin-bottom: 10px;
    }
    .gift-item .title {
        color: #333;
    }
    .gold {
        color: #ff5339;
    }
    .oldprice {
        font-size: 10px;
        text-decoration: line-through;
        color: #aaa;
    }
    .discount {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 10px;
        color: #fff;
        background: #413d3c;
        padding: 0px 2px;
    }
    .more {
        margin: 15px auto;
        text-align: center;
        color: #999;
    }
</style>